import React, { Component } from 'react'
import './Booksell.css'
import bases from './Bases'
// import './Booksell.scss'
import { Carousel } from 'antd'
import { Menu } from 'antd';
import { Card } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;



const contentStyle = {
  height: '300px',
  color: '#fff',
  lineHeight: '300px',
  textAlign: 'center',
  background: '#364d79',
}

class Sider extends React.Component {
  handleClick = e => {
    console.log('click ', e);
  };

  render() {
    return (
      <Menu
        onClick={this.handleClick}
        style={{ width: 256 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
          <Menu.ItemGroup key="g1" title="Item 1">
            <Menu.Item key="1">Option 1</Menu.Item>
            <Menu.Item key="2">Option 2</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup key="g2" title="Item 2">
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
          </Menu.ItemGroup>
        </SubMenu>
        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}


export default class Booksell extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
          bases,current:bases[0],count:1
        }
    }

  _add = () => {
      let count = this.state.count
      count++
      this.setState({count})
  }
  // _add = () => {
  //     let count = this.state.count
  //     let current = this.state.current //找到当前current
  //     let index = current.items.indexOf(item) //找到位置
  //     item.count++
  //     this.setState({count})
  // }
  _dsc = () => {
    let count = this.state.count
    count--
    this.setState({count})
    }
    
    render() {
        return (
            <div id="wraper">
               <div id="header">  {/* 顶层模块*/}
                <div id="lunbo-head">
                  <Carousel autoplay>
                    <div>
                      <h3 style={contentStyle}>1</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>3</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>4</h3>
                    </div>
                  </Carousel>
                 </div>
                </div>

                <div id="hdown">   {/*下面选购模块 */}
                  <div id="down-head-son">
                    <div id="dleft">
                      <div id="advert-down"></div> {/*菜单栏上广告 */}
                      <div id="menu-down">  {/*左边菜单栏 */}
                        <Sider></Sider>
                      </div>
                    </div>
                <div id="center-down">
                  {this.state.bases.map(base => {
                   return<div id="message-down">
                     <h3 id="hot">{base.ttitle}：<span id="index">{ base.tindex}</span> </h3>
                  </div>
                     })}
                  <div id="table-down">{/*产品模块 */}
                    
                    {this.state.current.items.map(item => {
                    return <div id="goods">
                    <div id="goods_img"><img src={item.img} alt="" /></div>
                      <p id="name">{ item.bname}</p>
                      <p id="price">{item.price}元/份
                    <button id="jian" onClick={this._dsc}>-</button>
                        <input type="text" id="num" value={this.state.count}/>
                    <button id="add" onClick={this._add}>+</button></p>
                    <button id ="order" >订购</button>                          
                      </div>
                      
                    })}
                  </div>{/*中间商品栏 */}
                    </div>
                    <div id="dright">{/*右边购物车模块 */}
                      <div id="cart-head">购物车</div>
                      <div id="cart-in"></div>
                      <div id="cart-bottom">

                      </div>
                    </div>
                  </div>
                </div>

            </div>
        )
    }

    
}
